<template>
  <!-- 模板的左中右布局配置 -->
  <div class="layout-view">
    <!-- 基础左中右布局 -->
    <div class="layout-view-left">
      <div v-if="leftboxmessage[0]" class="hasdata-view">
        <!-- 左侧框展示组件 -->
        <div
          v-for="(leftitem, leftindex) in leftboxmessage"
          :key="leftindex"
          class="hasdata-view-box"
          :style="{ height: leftitem.assemblyHeight + '%' }"
        >
          <iframeshowComponentsVue :boxmessage="leftitem" />
        </div>
        <div class="hasdata-view-box-edit" @click="setdiaview(1, 'left')"></div>
      </div>
      <div v-else class="nolayout-data" @click="setdiaview(1, 'left')">
        <i class="el-icon-plus zhicon"></i>
      </div>
    </div>
    <div v-if="layoutCode !== 'topBottomColumns'&&layoutCode !== 'upFlipperdownContent'" class="layout-view-center">
      <div v-if="centerboxmessage[0]" class="hasdata-view">
        <!-- 中间展示组件 -->
        <div
          v-for="(centeritem, centerindex) in centerboxmessage"
          :key="centerindex"
          class="hasdata-view-box"
          :style="{ height: centeritem.assemblyHeight + '%' }"
        >
          <iframeshowComponentsVue :boxmessage="centeritem" />
        </div>
        <div
          class="hasdata-view-box-edit"
          @click="setdiaview(1, 'middle')"
        ></div>
      </div>
      <div v-else class="nolayout-data" @click="setdiaview(1, 'middle')">
        <i class="el-icon-plus zhicon"></i>
      </div>
    </div>
    <div v-if="layoutCode === 'upFlipperdownContent'" class="layout-view-center">
      <div v-if="centerboxmessage[0]" class="hasdata-view">
        <!-- 中间展示组件 -->
        <div
          v-for="(centeritem, centerindex) in centerboxmessage"
          :key="centerindex"
          class="hasdata-view-box"
          :style="{ height: centeritem.assemblyHeight + '%' }"
        >
          <iframeshowComponentsVue :boxmessage="centeritem" />
        </div>
        <div
          class="hasdata-view-box-edit"
          @click="setdiaview(1, 'middleTopBottom')"
        ></div>
      </div>
      <div v-else class="nolayout-data" @click="setdiaview(1, 'middleTopBottom')">
        <i class="el-icon-plus zhicon"></i>
      </div>
    </div>
    <div v-if="layoutCode === 'topBottomColumns'" class="layout-view-center">
      <div
        v-if="centerboxmessage[0] && layoutCode === 'topBottomColumns'"
        class="hasdata-view hasdata-view-middleTopBottom hasdata-view-middleTop"
      >
        <!-- 中间展示组件 -->
        <div
          v-for="(centeritem, centerindex) in centerboxmessage"
          :key="centerindex"
          class="hasdata-view-box"
          :style="{ height: centeritem.assemblyHeight + '%' }"
        >
          <iframeshowComponentsVue :boxmessage="centeritem" />
        </div>
        <div
          class="hasdata-view-box-edit"
          @click="setdiaview(1, 'middleTop')"
        ></div>
      </div>
      <div
        v-if="centerboxmessage.length === 0"
        class="nolayout-data nolayout-data-middleTopBottom nolayout-data-middleTop"
        @click="setdiaview(1, 'middleTop')"
      >
        <i class="el-icon-plus zhicon"></i>
      </div>
      <div
        v-if="middleBottomboxmessage[0]"
        class="hasdata-view hasdata-view-middleTopBottom hasdata-view-middleBottom"
      >
        <!-- 中间展示组件 -->
        <div
          v-for="(centeritem, centerindex) in middleBottomboxmessage"
          :key="centerindex"
          class="hasdata-view-box"
          :style="{ height: centeritem.assemblyHeight + '%' }"
        >
          <iframeshowComponentsVue :boxmessage="centeritem" />
        </div>
        <div
          class="hasdata-view-box-edit"
          @click="setdiaview(1, 'middleBottom')"
        ></div>
      </div>
      <div
        v-if="middleBottomboxmessage.length === 0"
        class="nolayout-data nolayout-data-middleTopBottom nolayout-data-middleBottom"
        @click="setdiaview(1, 'middleBottom')"
      >
        <i class="el-icon-plus zhicon"></i>
      </div>
    </div>
    <div class="layout-view-right">
      <div v-if="rightboxmessage[0]" class="hasdata-view">
        <!-- 右侧框展示组件 -->
        <div
          v-for="(rightitem, rightindex) in rightboxmessage"
          :key="rightindex"
          class="hasdata-view-box"
          :style="{ height: rightitem.assemblyHeight + '%' }"
        >
          <iframeshowComponentsVue :boxmessage="rightitem" />
        </div>
        <div
          class="hasdata-view-box-edit"
          @click="setdiaview(1, 'right')"
        ></div>
      </div>
      <div v-else class="nolayout-data" @click="setdiaview(1, 'right')">
        <i class="el-icon-plus zhicon"></i>
      </div>
    </div>
    <!-- 组件添加弹框 -->
    <div v-if="diastau === 1" class="add-components-dia">
      <div class="top-bar"></div>
      <div class="top-title-line">
        <div class="line-title">布局的业务组件添加</div>
        <div class="line-close" @click="setdiaview(0)">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="screen-dia-main">
        <div
          v-for="(item, index) in addboxcomsList"
          :key="index"
          class="dia-main-addline"
        >
          <div class="dia-main-inputline">
            <div class="inputline-name">组件编码</div>
            <div class="inputline-valuetwo">
              {{ compnentsList[item.componentsindex].assemblyCode }}
            </div>
            <!-- <input v-model="item.assemblyId" class="inputline-value" /> -->
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">宽度占比</div>
            <input v-model="item.assemblyLong" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">高度占比</div>
            <input v-model="item.assemblyHeight" class="inputline-value" />
          </div>
          <!-- 可以选择的业务组件 -->
          <div class="components-line">
            <div class="slect-name">组件选择</div>
            <select v-model="item.componentsindex" class="selcect-one">
              <option
                v-for="(comitem, comindex) in compnentsList"
                :key="comindex"
                :value="comindex"
              >
                {{ comitem.assemblyName }}({{ comitem.assemblyCode }})
              </option>
            </select>
          </div>
          <div class="addline-but">
            <div class="addline-but1" @click="delcomponentsmet(index)">
              删除此业务组件
            </div>
            <div
              class="addline-but2"
              @click="showbasecomponents(true, comitem)"
            >
              业务组件预览
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-bar">
        <div class="bottom-bar-cancel" @click="addcomponentsmet()">
          增加组件
        </div>
        <div class="bottom-bar-confirm" @click="saveview()">确认保存</div>
      </div>
    </div>
    <!-- 业务组件修改弹框=可修改名字高度占比宽度等外部数据，不涉及基础组件 -->
    <div v-if="diastau === 2" class="add-components-dia">
      <div class="top-bar"></div>
      <div class="top-title-line">
        <div class="line-title">布局的业务组件修改</div>
        <div class="line-close" @click="setdiaview(0)">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="screen-dia-main">
        <div
          v-for="(item, index) in editboxcomsList"
          :key="index"
          class="dia-main-addline"
        >
          <div class="dia-main-inputline">
            <div class="inputline-name">组件编码</div>
            <div class="inputline-valuetwo">
              {{ compnentsList[item.componentsindex].assemblyCode }}
            </div>
            <!-- <input v-model="item.assemblyId" class="inputline-value" /> -->
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">宽度占比</div>
            <input
              v-model="item.assemblyLong"
              type="number"
              class="inputline-value"
            />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">高度占比</div>
            <input
              v-model="item.assemblyHeight"
              type="number"
              class="inputline-value"
            />
          </div>
          <!-- 可以选择的业务组件 -->
          <div class="components-line">
            <div class="slect-name">组件选择</div>
            <select v-model="item.componentsindex" class="selcect-one">
              <option
                v-for="(comitem, comindex) in compnentsList"
                :key="comindex"
                :value="comindex"
              >
                <div v-if="comitem">
                  {{ comitem.assemblyName }}({{ comitem.assemblyCode }})
                </div>
              </option>
            </select>
          </div>
          <div class="addline-but">
            <div class="addline-but1" @click="editcomponentsmet(index)">
              确认修改此业务组件
            </div>
            <div class="addline-but2" @click="delcomponentsmettwo(index)">
              删除组件
            </div>
            <div
              class="addline-but1"
              @click="showbasecomponents(true, comitem)"
            >
              业务组件预览
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 业务组件展示弹框 -->
    <div v-if="isshowkuang" class="add-components-dia">
      <div class="top-bar"></div>
      <div class="top-title-line">
        <div class="line-title">业务组件展示</div>
        <div class="line-close" @click="showbasecomponents(false)">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="screen-dia-main">
        <div
          class="showkuang-one"
          :style="{ height: nowkuangmesHeight + 'px' }"
        >
          <div class="kuangone-main">
            <iframeshowComponentsVue :boxmessage="nowkuangmes" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import iframeshowComponentsVue from "./iframeshowComponents.vue";
import axios from "axios";
export default {
  name: "Layone",
  components: { iframeshowComponentsVue },
  props: {
    // 当前导航栏状态
    selectStau: {
      type: String,
      default: () => ""
    },
    // 当前导航栏index
    navindex: {
      type: Number,
      default: () => {
        return -1;
      }
    }
  },
  data() {
    return {
      // 处理过的框内数据
      leftboxmessage: [],
      // 未处理的框内数据
      leftboxmessageone: [],
      centerboxmessage: [],
      centerboxmessageone: [],
      rightboxmessage: [],
      rightboxmessageone: [],
      // 特殊的上下结构的组件
      middleBottomboxmessageone: [],
      middleBottomboxmessage: [],
      // 当前要添加到盒子中的组件-替换原盒子信息
      addboxcomsList: [],
      // 信息修改相关
      editboxcomsList: [],
      // 调用哪个弹窗
      diastau: 0,
      // 选择了哪个位置
      nowselctedview: "",
      // 添加的组件
      compnentsList: [],
      // 是否展示业务组件
      isshowkuang: false,
      // 先来个最复杂的布局
      nowkuangmes: {
        titleMes: {
          name: "基地简介",
          titleImg: "bar1-1-1.png",
          titleDes: "JJ Lin"
        },
        assemblyLong: 100,
        assemblyHeight: 36,
        assemblyCode: "K1",
        cockpitAssemblyContentList: [
          [
            {
              // cockpitAssemblyCode: "CGY8iNzhP0",
              showType: "A1",
              height: 100,
              dataSources: 1,
              unitCode: "unitCode1",
              width: 100
            }
          ]
        ]
      },
      // 当前导航栏信息
      templateNavigationVOList: [],
      // 默认框高200px，若有数据可以从后端调用获得占用百分比，通过id拿到当前位置高度，进行计算拿到最适合的高度
      nowkuangmesHeight: 400,
      layoutCode: "",
      layout: "middle"
    };
  },
  watch: {
    navindex: {
      handler(newval) {
        this.$message.success("选择导航栏成功！")
        this.leftboxmessage = []
        this.centerboxmessage = []
        this.middleBottomboxmessage = [];
        this.rightboxmessage = []
        this.gettemplemes()
      },
      immediate: true,
      deep: true
    },
    // layoutCode: {
    //   handler(newData) {
    //     if (newData && newData === "upFlipperdownContent") {
    //       this.layout = "middleTopBottom";
    //     } else if (newData && newData === "topBottomColumns") {
    //       this.layout = "middleTop";
    //     } else if (newData) {
    //       this.layout = "middel";
    //     }
    //   },
    //   immediate: true,
    //   deep: true
    // },
    selectStau: {
      handler(newData) {},
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.getcomponentsMesList();
    // this.gettemplemes();
  },
  methods: {
    // 获取布局中展示框中数据
    getboxmesMet() {
      if (this.layoutCode && this.layoutCode === "upFlipperdownContent") {
        this.layout = "middleTopBottom";
      } else if (this.layoutCode && this.layoutCode === "topBottomColumns") {
        this.layout = "middleTop";
      } else if (this.layoutCode) {
        this.layout = "middel";
      }
      this.getleftboxmesMet();
      this.getcenterboxmesMet();
      this.getrightboxmesMet();
    },
    // 1.获取左侧的业务组件布局
    getleftboxmesMet() {
      // 处理过的数据
      this.leftboxmessage = [];
      // 未处理的后端数据
      this.leftboxmessageone = [];
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/templateAssembly/queryInfoByLayout";
      axios({
        method: "get",
        url: requrl,
        params: {
          layout: "left",
          templateNavigationId:
            this.templateNavigationVOList[this.navindex].templateNavigationId
        },
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      }).then((res) => {
        if (res.data.code === 1) {
          let meslist = res.data.data || [];
          this.leftboxmessageone = meslist;
          if (meslist[0]) {
            this.$message.success("左侧业务组件获取成功！");
            let newcomlist = [];
            meslist.forEach((itemone, indexone) => {
              let baskuangmes = {
                titleMes: {
                  name: itemone.assembly.assemblyName,
                  titleDes: itemone.assembly.assemblyEnName
                },
                assemblyLong: itemone.assemblyLong,
                assemblyHeight: itemone.assemblyHeight,
                assemblyCode: itemone.assembly.assemblyCode,
                cockpitAssemblyContentList: this.handleboxmes(
                  itemone.assembly.templateAssemblyDTOList
                )
              };
              newcomlist.push(baskuangmes);
              if (meslist.length - 1 === indexone) {
                this.leftboxmessage = newcomlist;
              }
            });
            console.log("zzzz", this.leftboxmessage);
          }
        }
      });
    },
    // 2.获取中间的业务组件布局
    getcenterboxmesMet() {
      this.centerboxmessage = [];
      this.centerboxmessageone = [];
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/templateAssembly/queryInfoByLayout";
      axios({
        method: "get",
        url: requrl,
        params: {
          layout: this.layout || "middle",
          templateNavigationId:
            this.templateNavigationVOList[this.navindex].templateNavigationId
        },
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      }).then((res) => {
        if (res.data.code === 1) {
          this.$message.success("中间业务组件获取成功！");
          let meslist = res.data.data || [];
          this.centerboxmessageone = meslist;
          if (meslist[0]) {
            this.$message.success("右侧业务组件获取成功！");
            let newcomlist = [];
            meslist.forEach((itemone, indexone) => {
              let baskuangmes = {
                titleMes: {
                  name: itemone.templateAssemblyName,
                  titleDes: itemone.templateAssemblyName
                },
                assemblyLong: itemone.assemblyLong,
                assemblyHeight: itemone.assemblyHeight,
                assemblyCode: itemone.assemblyCode,
                cockpitAssemblyContentList: this.handleboxmes(
                  itemone.templateAssemblyDTOList
                )
              };
              newcomlist.push(baskuangmes);
              if (meslist.length - 1 === indexone) {
                this.centerboxmessage = newcomlist;
              }
            });
          }
        }
      });
      if (this.layoutCode === "topBottomColumns") {
        this.getmiddleBottomboxmesMet();
      }
    },
    getmiddleBottomboxmesMet() {
      this.middleBottomboxmessageone = [];
      this.middleBottomboxmessage = [];
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/templateAssembly/queryInfoByLayout";
      axios({
        method: "get",
        url: requrl,
        params: {
          layout: "middleBottom",
          templateNavigationId:
            this.templateNavigationVOList[this.navindex].templateNavigationId
        },
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      }).then((res) => {
        if (res.data.code === 1) {
          this.$message.success("中间下方业务组件获取成功！");
          let meslist = res.data.data || [];
          this.middleBottomboxmessageone = meslist;
          if (meslist[0]) {
            let newcomlist = [];
            meslist.forEach((itemone, indexone) => {
              let baskuangmes = {
                titleMes: {
                  name: itemone.templateAssemblyName,
                  titleDes: itemone.templateAssemblyName
                },
                assemblyLong: itemone.assemblyLong,
                assemblyHeight: itemone.assemblyHeight,
                assemblyCode: itemone.assemblyCode,
                cockpitAssemblyContentList: this.handleboxmes(
                  itemone.templateAssemblyDTOList
                )
              };
              newcomlist.push(baskuangmes);
              if (meslist.length - 1 === indexone) {
                this.middleBottomboxmessage = newcomlist;
              }
            });
          }
        }
      });
    },
    // 3.获取右边的业务组件布局
    getrightboxmesMet() {
      this.rightboxmessage = [];
      // 未处理的后端数据
      this.rightboxmessageone = [];
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/templateAssembly/queryInfoByLayout";
      axios({
        method: "get",
        url: requrl,
        params: {
          layout: "right",
          templateNavigationId:
            this.templateNavigationVOList[this.navindex].templateNavigationId
        },
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      }).then((res) => {
        if (res.data.code === 1) {
          this.$message.success("右侧业务组件获取成功！");
          // 调用获取获取框的详细数据并赋值给展示框-可以修改展示平台的左侧框组件
          let meslist = res.data.data || [];
          this.rightboxmessageone = meslist;
          if (meslist[0]) {
            this.$message.success("右侧业务组件获取成功！");
            let newcomlist = [];
            meslist.forEach((itemone, indexone) => {
              let baskuangmes = {
                titleMes: {
                  name: itemone.templateAssemblyName,
                  titleDes: itemone.templateAssemblyName
                },
                assemblyLong: itemone.assemblyLong,
                assemblyHeight: itemone.assemblyHeight,
                assemblyCode: itemone.assemblyCode,
                cockpitAssemblyContentList: this.handleboxmes(
                  itemone.templateAssemblyDTOList
                )
              };
              newcomlist.push(baskuangmes);
              if (meslist.length - 1 === indexone) {
                this.rightboxmessage = newcomlist;
              }
            });
          }
        }
      });
    },
    // 4.获取业务组件信息进行转化
    handleboxmes(e) {
      // let testmes = [
      //   {
      //     dataSources: 0,
      //     height: 50,
      //     showType: "A1",
      //     unitCode: "testcode1",
      //     width: 100,
      //     xAxis: 1,
      //     yAxis: 1
      //   }
      // ]
      let testmes = e || [];
      let newlist = [];
      if (testmes[0]) {
        testmes.forEach((item, index) => {
          if (item.yAxis === 1) {
            if (!newlist[0]) newlist.push([]);
            newlist[0].push({
              dataSources: item.dataSources,
              height: item.height,
              showType: item.showType,
              unitCode: item.unitCode,
              width: item.width
            });
          }
          if (item.yAxis === 2) {
            if (!newlist[1]) newlist.push([]);
            newlist[1].push({
              dataSources: item.dataSources,
              height: item.height,
              showType: item.showType,
              unitCode: item.unitCode,
              width: item.width
            });
          }
          if (testmes.length - 1 === index) {
            // console.log('处理后的数据', newlist)
          }
        });
      }
      return newlist;
    },
    // 展示组件弹框显示与隐藏
    showbasecomponents(z = false, e) {
      if (e) {
        this.nowkuangmes = e;
        console.log("展示业务组件", this.nowkuangmes);
      }
      // 先赋值然后显示弹框
      this.isshowkuang = z;
    },
    // 保存组件信息-add
    saveview() {
      // 业务组件详细信息查询接口/cockpitAssembly/query
      let layen = "";
      // 根据选择的不同页面，赋值到对应位置，同时调用接口保存至数据库
      if (this.nowselctedview === "left") {
        layen = "left";
      } else if (this.nowselctedview === "middle") {
        layen = "middle";
      } else if (this.nowselctedview === "right") {
        layen = "right";
      } else if (this.nowselctedview === "middleTop") {
        layen = "middleTop";
      } else if (this.nowselctedview === "middleBottom") {
        layen = "middleBottom";
      } else if (this.nowselctedview === "middleTopBottom") {
        layen = "middleTopBottom";
      }
      // 框内展示信息处理
      this.leftboxmessage = [];
      let zhcomslist = [];
      this.addboxcomsList.forEach(async (item, index) => {
        let navmes = this.templateNavigationVOList[this.navindex];
        let comsmes = this.compnentsList[item.componentsindex];
        // let allcomslist = await this.getcomsallmes(comsmes.assemblyId)
        // console.log('业务z', allcomslist)
        let zhmesone = {
          assemblyHeight: item.assemblyHeight,
          assemblyLong: item.assemblyLong,
          assemblyCode: comsmes.assemblyCode,
          layout: layen,
          sort: index,
          assemblyId: comsmes.assemblyId,
          // "templateAssemblyContentDTOList": allcomslist,
          templateNavigationId: navmes.templateNavigationId,
          templateAssemblyName: comsmes.assemblyName,
          templateAssemblyEnName: comsmes.assemblyEnName
        };
        zhcomslist.push(zhmesone);
        if (this.addboxcomsList.length - 1 === index) {
          console.log("处理好的新增数据", zhcomslist);
          // this.leftboxmessage = zhcomslist;
          let baseurl = this.$zhurl;
          let requrl = baseurl + "/templateAssembly/addList";
          axios({
            method: "POST",
            url: requrl,
            data: zhcomslist,
            headers: {
              "Content-Type": "application/json;charset=UTF-8"
            }
          }).then((res) => {
            if (res.data.code === 1) {
              this.$message.success("业务组件添加成功！");
              this.diastau = 0;
              // 调用获取获取框的详细数据并赋值给展示框-可以修改展示平台的左侧框组件
              this.getboxmesMet();
            }
          });
        }
      });
    },
    // 修改布局中组件并且调用后端接口
    async editcomponentsmet(i) {
      let editcomsMes = this.editboxcomsList[i];
      let comsmes = this.compnentsList[editcomsMes.componentsindex];
      // let allcomslist = await this.getcomsallmes(comsmes.assemblyId)
      let params = {
        assemblyHeight: Number(editcomsMes.assemblyHeight),
        assemblyLong: Number(editcomsMes.assemblyLong),
        // templateAssemblyContentDTOList: allcomslist,
        assemblyId: comsmes.assemblyId,
        templateAssemblyId: editcomsMes.templateAssemblyId
      };
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/templateAssembly/edit";
      axios({
        method: "POST",
        url: requrl,
        data: params,
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      }).then((res) => {
        if (res.data.code === 1) {
          this.$message.success("修改成功！");
          this.diastau = 0;
          this.getboxmesMet();
        }
      });
    },
    // 获取组件的详细信息
    getcomsallmes(assemblyId) {
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/assembly/query";
      let param = {
        assemblyId: assemblyId
      };
      return new Promise((resove, reject) => {
        axios({
          method: "GET",
          url: requrl,
          params: param,
          headers: {
            "Content-Type": "application/json;charset=UTF-8"
          }
        }).then((res) => {
          if (res.data.data.assemblyContentDTOList) {
            resove(res.data.data.assemblyContentDTOList);
          } else {
            resove([]);
          }
        });
      });
    },
    // 弹框展示隐藏方法
    setdiaview(i, pos) {
      this.addboxcomsList = [];
      if (pos) {
        this.nowselctedview = pos;
      }
      if (i === 0) {
        // this.addboxcomsList = []
      }
      if (this.diastau > 0 && i > 0) {
        this.$message.warning("请勿重复点击!");
      } else {
        if (i === 1) {
          if (this.selectStau === "add") {
            this.diastau = 1;
          } else if (this.selectStau === "edit") {
            this.diastau = 2;
            this.editboxcomsList = [];
            // 将值辅到修改信息列表
            let editmeslistone = [];
            let editmeslisttwo = [];
            let editmeslistthree = [];
            let editmeslistfour = [];
            if (this.nowselctedview === "left") {
              this.leftboxmessageone.forEach((itemtwo, indextwo) => {
                let editmestwo = {
                  templateAssemblyId: itemtwo.templateAssemblyId,
                  assemblyLong: itemtwo.assemblyLong,
                  assemblyHeight: itemtwo.assemblyHeight,
                  componentsindex: this.getkuangindex(itemtwo.assemblyCode)
                };
                console.log("左侧模板业务组件", itemtwo);
                editmeslistone.push(editmestwo);
                if (this.leftboxmessageone.length - 1 === indextwo) {
                  this.editboxcomsList = editmeslistone;
                }
              });
            } else if (this.nowselctedview === "right") {
              this.rightboxmessageone.forEach((itemtwo, indextwo) => {
                let editmestwo = {
                  templateAssemblyId: itemtwo.templateAssemblyId,
                  assemblyLong: itemtwo.assemblyLong,
                  assemblyHeight: itemtwo.assemblyHeight,
                  componentsindex: this.getkuangindex(itemtwo.assemblyCode)
                };
                console.log("右侧模板业务组件", itemtwo);
                editmeslisttwo.push(editmestwo);
                if (this.rightboxmessageone.length - 1 === indextwo) {
                  this.editboxcomsList = editmeslisttwo;
                }
              });
            } else if (
              this.nowselctedview === "middle" ||
              this.nowselctedview === "middleTop" ||
              this.nowselctedview === "middleTopBottom"
            ) {
              this.centerboxmessageone.forEach((itemtwo, indextwo) => {
                let centermestwo = {
                  templateAssemblyId: itemtwo.templateAssemblyId,
                  assemblyLong: itemtwo.assemblyLong,
                  assemblyHeight: itemtwo.assemblyHeight,
                  componentsindex: this.getkuangindex(itemtwo.assemblyCode)
                };
                console.log("中间模板业务组件", itemtwo);
                editmeslistthree.push(centermestwo);
                console.log("中间模板业务组件", editmeslistthree);

                if (this.centerboxmessageone.length - 1 === indextwo) {
                  this.editboxcomsList = editmeslistthree;
                }
              });
            } else if (this.nowselctedview === "middleBottom") {
              this.middleBottomboxmessageone.forEach((itemtwo, indextwo) => {
                let centermestwo = {
                  templateAssemblyId: itemtwo.templateAssemblyId,
                  assemblyLong: itemtwo.assemblyLong,
                  assemblyHeight: itemtwo.assemblyHeight,
                  componentsindex: this.getkuangindex(itemtwo.assemblyCode)
                };
                console.log("中间下方模板业务组件", itemtwo);
                editmeslistfour.push(centermestwo);
                if (this.middleBottomboxmessageone.length - 1 === indextwo) {
                  this.editboxcomsList = editmeslistfour;
                }
              });
            }
            // this.getboxmesMet()
          } else {
            this.$message.warning("请选择状态！");
          }
        } else {
          this.diastau = i;
        }
      }
    },
    // 添加一个业务组件
    addcomponentsmet() {
      this.addboxcomsList.push({
        componentsindex: 0,
        assemblyHeight: 33,
        assemblyLong: 100
        // 模板导航栏id
        // templateNavigationId: 0,
        // layoutCode: ""
      });
    },
    // 删除一个业务组件
    delcomponentsmet(i) {
      this.addboxcomsList.splice(i, 1);
    },
    // 修改时---删除一个业务组件
    delcomponentsmettwo(i) {
      let editcomsMes = this.editboxcomsList[i];
      // let comsmes = this.compnentsList[editcomsMes.componentsindex]
      // let allcomslist = await this.getcomsallmes(comsmes.assemblyId)
      let params = {
        // assemblyHeight: Number(editcomsMes.assemblyHeight),
        // assemblyLong: Number(editcomsMes.assemblyLong),
        // templateAssemblyContentDTOList: allcomslist,
        // assemblyId: comsmes.assemblyId,
        templateAssemblyId: editcomsMes.templateAssemblyId
      };
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/templateAssembly/del";
      axios({
        method: "POST",
        url: requrl,
        data: params,
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      }).then((res) => {
        if (res.data.code === 1) {
          this.editboxcomsList.splice(i, 1);
          this.$message.success("删除成功！");
          this.getboxmesMet();
        }
      });
    },
    // 获取一个所有组件基础信息
    getcomponentsMesList() {
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/assembly/queryList";
      axios({
        method: "GET",
        url: requrl,
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      }).then((response) => {
        let mes = response.data;
        if (mes.code === 1) {
          this.compnentsList = mes.data || [];
        } else {
          this.$message.warning("获取业务组件失败！");
        }
      });
    },
    // 通过code获取当前组件的index
    getkuangindex(code) {
      let zhindex = 0;
      this.compnentsList.forEach((itemone, index) => {
        if (itemone.assemblyCode === code) {
          zhindex = index;
        }
      });
      return zhindex;
    },
    // 获取当前模板的详情
    gettemplemes() {
      let query = this.$route.query;
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/template/queryTemplateInfo";
      if (query.templateCode) {
        axios({
          method: "GET",
          url: requrl + "?templateCode=" + query.templateCode
        }).then((response) => {
          let mes = response.data.data;
          if (mes) {
            // console.log(mes)
            // this.templemessage = mes
            // this.topscreentitle = mes.templateName
            this.templateNavigationVOList = mes.templateNavigationVOList || [];
            if (
              mes.templateNavigationVOList &&
              mes.templateNavigationVOList[0]
            ) {
              this.layoutCode =
                this.templateNavigationVOList[this.navindex].layoutCode;
              this.getboxmesMet();
            }
          }
        });
      } else {
        this.$message.warning("请先选模板！");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.layout-view {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .layout-view-left {
    width: 300px;
    height: 100%;
    position: relative;
    .hasdata-view {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .hasdata-view-box {
        position: relative;
        z-index: 2;
        width: 100%;
        // height: 30%;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }

    .hasdata-view:hover {
      border: #00faad 1px dashed;
      cursor: pointer;
    }
  }
  .layout-view-center {
    width: calc(100% - 620px);
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .hasdata-view {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .hasdata-view-box {
        width: 100%;
        height: 30%;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
    .hasdata-view:hover {
      border: #00faad 1px dashed;
      cursor: pointer;
    }
  }
  .layout-view-right {
    width: 300px;
    height: 100%;
    position: relative;
    .hasdata-view {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .hasdata-view-box {
        width: 100%;
        height: 30%;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
    .hasdata-view:hover {
      border: #00faad 1px dashed;
      cursor: pointer;
    }
  }
  .hasdata-view-middleTopBottom {
    height: 30% !important;
  }
  .hasdata-view-middleTop {
    top: 0%;
  }
  .hasdata-view-middleBottom {
    bottom: 0%;
  }
  .hasdata-view-box-edit {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
  }
}
.nolayout-data {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #004c90;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #004c90;
  .zhicon {
    font-size: 30px;
  }
}

.nolayout-data-middleTopBottom {
  height: 30%;
}
.nolayout-data-middleTop {
  top: 0%;
}
.nolayout-data-middleBottom {
  bottom: 0%;
}
.nolayout-data:hover {
  color: aliceblue;
}
.add-components-dia {
  width: 482px;
  // height: 191px;
  background: #303640;
  border: 1px solid #005c6f;
  border-radius: 7px;
  position: fixed;
  top: 15%;
  left: 40%;
  // background-color: #005c6f;
  z-index: 99;
  .top-bar {
    width: 480px;
    height: 10px;
    background: linear-gradient(90deg, #3581fb 0%, #00faad 100%);
    border-radius: 7px 7px 0px 0px;
  }
  .top-title-line {
    width: 470px;
    height: 35px;
    line-height: 35px;
    padding: 6px 8px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #484a4e;
    .line-title {
      height: 20px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: $textColor;
      letter-spacing: 2px;
    }
    .line-close {
      color: #10d7c4;
      cursor: pointer;
    }
    .line-close:hover {
      color: $textColor;
    }
  }
  .screen-dia-main {
    width: 482px;
    padding: 20px 10px;
    // max-height: 550px;
    overflow-y: auto;
    overflow-x: hidden;

    .dia-main-inputline {
      width: 442px;
      // background-color: #00FAAD;
      display: flex;
      justify-content: center;
      align-items: center;
      .inputline-name {
        width: 104px;
        height: 24px;
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: $textColor;
        line-height: 24px;
        text-align: center;
      }
      .inputline-value {
        width: 410px;
        height: 32px;
        box-sizing: border-box;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #494e57;
        box-sizing: border-box;
        outline: 0;
      }
      .inputline-valuetwo {
        width: 410px;
        height: 32px;
        line-height: 32px;
        box-sizing: border-box;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #494e57;
        box-sizing: border-box;
        outline: 0;
      }
    }
    .dia-main-addline {
      width: 442px;
      font-size: 16px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: $textColor;
      line-height: 24px;
      border-bottom: #00faad 1px dashed;
      padding-bottom: 16px;
      margin-bottom: 10px;
      .components-line {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        width: 442px;
        height: 48px;
        .slect-name {
          width: 90px;
          height: 36px;
          font-size: 16px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: $textColor;
          line-height: 36px;
          text-align: center;
        }
        .selcect-one {
          width: 350px;
          color: #00faad;
          margin-top: 12px;
          height: 36px;
          line-height: 36px;
          background-color: transparent;
          border: #00faad dashed 1px;
          cursor: pointer;
          option {
            background-color: #005c6f !important;
            color: $textColor;
            cursor: pointer;
          }
        }
      }
      .addline-but {
        width: 442px;
        display: flex;
        justify-content: space-around;
        margin-top: 15px;
        .addline-but1 {
          color: #00faad;
          border: 1px solid #00faad;
          cursor: pointer;
          padding: 5px 10px;
        }
        .addline-but1:hover {
          color: $textColor;
        }
        .addline-but2 {
          color: #3581fb;
          border: 1px solid #3581fb;
          cursor: pointer;
          padding: 5px 10px;
        }
        .addline-but2:hover {
          color: $textColor;
        }
      }
    }
    .dia-main-addline:last-of-type {
      padding-bottom: 0;
      margin: 0;
      border: none;
    }
    .showkuang-one {
      position: relative;
      left: 20px;
      width: 420px;
      height: 400px;
      // background-color: #00faad;
      .kuangone-main {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    }
  }
  .bottom-bar {
    width: 482px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;
    .bottom-bar-cancel {
      width: 96px;
      height: 33px;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #0cb9ae;
      color: #0cb9ae;
      cursor: pointer;
      line-height: 33px;
      text-align: center;
    }
    .bottom-bar-cancel:hover {
      color: #00faad;
    }
    .bottom-bar-confirm {
      width: 96px;
      height: 33px;
      background: #0cb9ae;
      border-radius: 5px 5px 5px 5px;
      cursor: pointer;
      line-height: 33px;
      text-align: center;
    }
    .bottom-bar-confirm:hover {
      color: #10fab4;
    }
  }
}
</style>
